<template>
    <div id="infoPannel" v-if="visible">
        <div class="pannel-header">
            <button class="close-button" @click="closeInfoPannel">x</button>
        </div>
        <table v-if="object != null">
            <tbody>
                <tr>
                    <td>目标名称：</td>
                    <td>
                        {{name}}
                    </td>
                </tr>
                <tr>
                    <td>目标类型：</td>
                    <td>
                        {{type}}
                    </td>
                </tr>
                <tr>
                    <td>类型描述：</td>
                    <td>
                        {{desc}}
                    </td>
                </tr>
                <tr v-for="(field, index) in fields" :key="field.fid">
                    <td v-if="index == 0">属性信息</td>
                    <td v-else></td>
                    <td>
                        {{field.name}}
                    </td>
                    <td>
                        {{field.value}}
                    </td>
                </tr>
            </tbody>
        </table>
        <div v-else class="text-center">
            <span>未选中任何目标</span>
        </div>
    </div>
</template>

<script>
import ObjectSelector from '../widget/ObjectSelector.vue'
export default {
    name: 'CesiumInfoPannel',
    data() {
        return  {
            name: '',
            type: '',
            desc: '',
            fields: []
        }
    },
    mounted() {
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        object: {
            type: Object
        }
    },
    watch: {
        object(newVal) {
            this.name = newVal.name;
            this.type = newVal.otype.name;
            this.desc = newVal.otype.des;
            this.fields = newVal.attributes;
        }
    },
    methods: {
        closeInfoPannel() {
            this.$emit('signal_closeInfoPannel', false);
        }
    },
    components: {
        ObjectSelector

    }
}
</script>

<style lang="less">
 @import '../../assets/bucket.css';

#infoPannel {
    position: absolute;
    background: rgba(42, 42, 42, 0.8);
    padding: 4px;
    border-radius: 4px;
    z-index: 1;
    color: rgba(255, 255, 255, 1.0);
    width: 30rem;
    font-size: 14px;
    margin: 0.8rem;

    td {
        min-width: 5rem;
    }

    .pannel-header {
        margin: 0 0;
        background-color: rgb(84, 84, 84);
        font-size: 18px;
        text-align: right;

        .close-button {
            background: none;
            right: 0;
            border: none;
            border-radius: 2px;
            font-weight: 700;
            padding: 0 5px;
            margin: 0;
            color: #edffff;
            font-size: inherit;
        }
    }

    .text-center {
        text-align: center;
    }
}
#infoPannel input {
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 2px;
    z-index: 1;
}

</style>

